﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartScorePrint.aspx.cs" Inherits="Web.ChartScorePrint" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/style_a/web.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="css/style_a/printall.css" type="text/css" rel="stylesheet" media="print" />
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="js/JScharts/jscharts_mb.js" type="text/javascript"></script>
    <script src="js/JGcharts/jquery.gchart.pack.js" type="text/javascript"></script>
    <script src="js/JGcharts/jquery.gchart.graphviz.pack.js" type="text/javascript"></script>
    <script src="js/JGcharts/jquery.gchart.icons.pack.js" type="text/javascript"></script>
    <script src="js/JGcharts/jquery.gchart.ext.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
        function randomColor() {	
            var arrHex = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
            var strHex = "#";
            var index;
            for(var i = 0; i < 6; i++) {
                index = Math.round(Math.random() * 15);
                strHex += arrHex[index];
            }	
            return strHex;
        }
        function tu1()
        {
            var myData = new Array(['个人', <%= ViewMyScore%>], ['班级', <%= ViewClassEverage %>], ['年级', <%= ViewGradeEverage %>], ['学区', <%= ViewAreaEverage %>]);
            var colors = ['#FA5E1F', '#FDCB3F', '#71D743', '#D23333'];
            //var myData = new Array(['个人', <%= ViewMyScore%>], ['班级', <%= ViewClassEverage %>], ['年级', <%= ViewGradeEverage %>]);
            //var colors = ['#FA5E1F', '#FDCB3F', '#71D743'];
            var myChart = new JSChart('barChart', 'bar');
            myChart.patchMbString();
            myChart.setFontFamily("微软雅黑");
            myChart.setDataArray(myData);
            myChart.colorizeBars(colors);
            myChart.setTitle('个人成绩比较');
	        myChart.setTitleColor('#333');
	        myChart.setAxisNameX('');
	        myChart.setAxisNameY('');
	        myChart.setAxisColor('#333');
	        myChart.setAxisWidth(1);
	        myChart.setAxisNameColor('#333');
	        myChart.setAxisValuesColor('#333');
	        myChart.setAxisPaddingTop(60);
	        myChart.setAxisPaddingLeft(50);
	        myChart.setAxisPaddingBottom(60);
	        myChart.setTextPaddingBottom(20);
	        myChart.setTextPaddingLeft(15);
	        myChart.setTitleFontSize(14);
	        myChart.setAxisNameFontSize(12);
	        myChart.setAxisValuesFontSize(14);
	        myChart.setBarValuesFontSize(12);
	        myChart.setBarBorderWidth(2);
	        myChart.setBarSpacingRatio(60);
	        myChart.setBarValuesColor('#333');
	        myChart.setGrid(true);
            myChart.setSize(616, 321);
            myChart.setBackgroundImage('images/chart_bg.jpg');
            myChart.draw();
        }
        
        function tu2()
        {
            $('#barChart1').gchart({
            type: 'barVertGrouped',
            width: 800,
            height: 400,
            backgroundColor: { angle: 'vertical', colorPoints: [['eeeeee', 0], ['white', 1]] },
            axes: [$.gchart.axis('bottom', 1, 8, 'black'),
            $.gchart.axis('left', 0, 100, 'black'),
            $.gchart.axis('bottom', ['序号'], [50], 'black')],
            margins: [50, 0, 20, 50],
            barWidth: 10,
            barSpacing: 2,
            barGroupSpacing: 10,
            minValue: 0,
            maxValue: 100,
            barZeroPoint: 0.0,
            legend: 'right',
            series: [$.gchart.series('个人', [<%= mychart %>], 'FA5E1F'),
            $.gchart.series('班级', [<%= classchart %>], '00ff00'),
            $.gchart.series('年级', [<%= gradechart %>], 'ffa500'),
            $.gchart.series('学区', [<%= areachart %>], '808080')]
            });
        }
//        function tu2()
//        {
//            $('#barChart1').gchart({
//            type: 'barVertGrouped',
//            width: 800,
//            height: 400,
//            backgroundColor: { angle: 'vertical', colorPoints: [['eeeeee', 0], ['white', 1]] },
//            axes: [$.gchart.axis('bottom', 1, 8, 'black'),
//            $.gchart.axis('left', 0, 100, 'black'),
//            $.gchart.axis('bottom', ['序号'], [50], 'black')],
//            margins: [50, 0, 20, 50],
//            barWidth: 10,
//            barSpacing: 2,
//            barGroupSpacing: 10,
//            minValue: 0,
//            maxValue: 100,
//            barZeroPoint: 0.0,
//            legend: 'right',
//            series: [$.gchart.series('个人', [<%= mychart %>], 'FA5E1F'),
//            $.gchart.series('班级', [<%= classchart %>], '00ff00'),
//            $.gchart.series('年级', [<%= gradechart %>], 'ffa500')]
//            });
//        }
        function tu3()
        {
            var pieData = new Array(<%= piechart %>);
            var pieChart = new JSChart('PieChart', 'pie');
            pieChart.patchMbString();
            pieChart.setFontFamily("微软雅黑");
            pieChart.setDataArray(pieData);
            pieChart.setTitle('试题能力维度分布情况');
            pieChart.setTitleColor('#333');
            pieChart.setTitleFontSize(20);
            pieChart.setPieUnitsFontSize(14);
            pieChart.setPieValuesFontSize(14);
            pieChart.setPieValuesColor('#333');
            pieChart.setPieUnitsColor('#333');
            pieChart.setPieUnitsOffset(30);
            pieChart.setSize(616, 321);
            pieChart.setPieRadius(100);
            pieChart.setBackgroundImage('images/chart_bg.jpg');
            pieChart.draw();

            var barData = new Array(<%= barchart %>);
            var barChart = new JSChart('barChart2', 'bar');
            var colors = [];
            for(var i = 0;i<barData.length;i++)
            {
                colors[i] = randomColor();
            }
            barChart.patchMbString();
            barChart.setFontFamily("微软雅黑");
            barChart.setDataArray(barData);
            barChart.colorizeBars(colors);
            barChart.setTitle('不同能力维度答题情况');
            barChart.setTitleColor('#333');
            barChart.setTitleFontSize(20);
            barChart.setAxisNameX('');
            barChart.setAxisNameY('%');
            barChart.setAxisColor('#333');
            barChart.setAxisNameColor('#333');
            barChart.setAxisNameFontSize(14);
            barChart.setBarValuesColor('#333');
            barChart.setBarValuesFontSize(14);
            barChart.setAxisValuesFontSize(14);
            barChart.setAxisWidth(1);
            barChart.setBarSpacingRatio(20);
            barChart.setSize(616, 321);
            barChart.setBackgroundImage('images/chart_bg.jpg');
            barChart.draw();
        }
        
        function tu4()
        {
            var pieData = new Array(<%= piechart1 %>);
            var pieChart = new JSChart('PieChart1', 'pie');
            pieChart.patchMbString();
            pieChart.setFontFamily("微软雅黑");
            pieChart.setDataArray(pieData);
            pieChart.setTitle('试题类型分布情况');
            pieChart.setTitleColor('#333');
            pieChart.setTitleFontSize(20);
            pieChart.setPieUnitsFontSize(14);
            pieChart.setPieValuesFontSize(14);
            pieChart.setPieValuesColor('#333');
            pieChart.setPieUnitsColor('#333');
            pieChart.setPieUnitsOffset(10);
            pieChart.setSize(616, 321);
            pieChart.setPieRadius(100);
            pieChart.setBackgroundImage('images/chart_bg.jpg');
            pieChart.draw();

            var barData = new Array(<%= barchart1 %>);
            var barChart = new JSChart('barChart3', 'bar');
             var colors = [];
            for(var i = 0;i<barData.length;i++)
            {
                colors[i] = randomColor();
            }
            barChart.patchMbString();
            barChart.setFontFamily("微软雅黑");
            barChart.setDataArray(barData);
            barChart.colorizeBars(colors);
            barChart.setTitle('不同题型答题情况');
            barChart.setTitleColor('#333');
            barChart.setTitleFontSize(20);
            barChart.setAxisNameX('');
            barChart.setAxisNameY('%');
            barChart.setAxisColor('#333');
            barChart.setAxisNameColor('#333');
            barChart.setAxisNameFontSize(9);
            barChart.setBarValuesColor('#333');
            barChart.setBarValuesFontSize(14);
            barChart.setAxisValuesFontSize(14);
            barChart.setAxisWidth(1);
            barChart.setBarSpacingRatio(20);
            barChart.setSize(616, 321);
            barChart.setBackgroundImage('images/chart_bg.jpg');
            barChart.draw();
        }
        function tu5()
        {
            var pieData = new Array(<%= piechart2 %>);
            var pieChart = new JSChart('PieChart2', 'pie');
            pieChart.patchMbString();
            pieChart.setFontFamily("微软雅黑");
            pieChart.setDataArray(pieData);
            pieChart.setTitle('试题难易度分布情况');
            pieChart.setTitleColor('#333');
            pieChart.setTitleFontSize(20);
            pieChart.setPieUnitsFontSize(14);
            pieChart.setPieValuesFontSize(14);
            pieChart.setPieValuesColor('#333');
            pieChart.setPieUnitsColor('#333');
            pieChart.setSize(616, 321);
            pieChart.setPieRadius(95);
            pieChart.setBackgroundImage('images/chart_bg.jpg');
            pieChart.draw();

            var barData = new Array(<%= barchart2 %>);
            var barChart = new JSChart('barChart4', 'bar');
             var colors = [];
            for(var i = 0;i<barData.length;i++)
            {
                colors[i] = randomColor();
            }
            barChart.patchMbString();
            barChart.setFontFamily("微软雅黑");
            barChart.setDataArray(barData);
            barChart.colorizeBars(colors);
            barChart.setTitle('不同难度答题情况');
            barChart.setTitleColor('#333');
            barChart.setTitleFontSize(20);
            barChart.setAxisNameX('');
            barChart.setAxisNameY('%');
            barChart.setAxisColor('#333');
            barChart.setAxisNameColor('#333');
            barChart.setAxisNameFontSize(9);
            barChart.setBarValuesColor('#333');
            barChart.setBarValuesFontSize(14);
            barChart.setAxisValuesFontSize(14);
            barChart.setAxisWidth(1);
            barChart.setBarSpacingRatio(20);
            barChart.setSize(616, 321);
            barChart.setBackgroundImage('images/chart_bg.jpg');
            barChart.draw();
        
        }
        $(function() {
            tu1();
            tu2();
            tu3();
            tu4();
            tu5();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="home">
      <h1 class="logo"><strong>学科评价报告</strong><em>北京市海淀区义务教育基础学科</em></h1>
      <div class="subject"><strong>考试编号</strong><em>No.<%= ExamRoomId %></em></div>
      <ul class="info">
        <li>考试时间：<%= ExamRoomDate %></li>
        <li>学校名称：<%= SchoolName %></li>
        <li>学生年级：<%= GradeName %></li>
        <li>学生班级：<%= ClassName %></li>
        <li>学生姓名：<%= StudentName %></li>
        <%--<li>学生性别：<%= StudentSex %></li>--%>
        <li>学 籍 号：<%= StudentNumber %></li>
      </ul>
      <a href="#" class="link" title="进入">进入</a>
      <div class="foot">海淀区课业诊断项目组  技术支持</div>
    </div>
    
    
    <div id="main">
    <ul id="page">
    <li class="every">
      <div class="module-t">
        <h3>综合评价</h3>
      </div>
      <div class="module-c">
      	<%--<div class="content">你本次考试的总体评价为<%= bcnm%></div>--%>
        <table class="module_table">
            <thead>
            <tr>
            <th rowspan="2">你的成绩</th>
            <th colspan="3">班级成绩</th>
            <th colspan="3">年级成绩</th>
            <th colspan="3">学区成绩</th>
            </tr>
            <tr>
            <th width="10%">平均分</th>
            <th width="10%">最高分</th>
            <th width="10%">考试人数</th>
            <th width="10%">平均分</th>
            <th width="10%">最高分</th>
            <th width="10%">考试人数</th>
            <th width="10%">平均分</th>
            <th width="10%">最高分</th>
            <th width="10%">考试人数</th>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td><%=ViewMyScore %>&nbsp;</td>
            <td><%=ViewClassEverage%>&nbsp;</td>
            <td><%=ViewGClassMax%>&nbsp;</td>
            <td><%=ViewClassNumber %></td>
            <td><%=ViewGradeEverage%>&nbsp;</td>
            <td><%=ViewGradeMax%>&nbsp;</td>
            <td><%=ViewGradeNumber %></td>
            <td><%=ViewAreaEverage%>&nbsp;</td>
            <td><%=ViewAreaMax%>&nbsp;</td>
            <td><%=ViewAreaNumber %></td>
            </tr>
            </tbody>
        </table>
        <ul class="module_stat">
          <li>
            <div class="module-c" id="barChart"></div>
          </li>
        </ul>
      </div>
      <div class="module-t">
        <h3>试卷点评</h3>
      </div>
      <div class="module-c">
        <div class="content"><%= comment%></div>
      </div>
     </li>
     
     
    <li class="every">    
    <div class="module-t">
        <h3>知识领域得分率</h3>
    </div>
    <div class="module-c">
        <table class="module_table">
            <tr>
            <th width="8%">序号</th>
            <th width="16%">知识领域</th>
            <th width="8%">题量</th>
            <th width="8%">分值</th>
            <th width="10%">个人得分</th>
            <th width="12%">个人得分率</th>
            <th width="12%">班级得分率</th>
            <th width="12%">年级得分率</th>
            <th width="12%">学区得分率</th>
            </tr>
            <tbody id="KnowledgeList" runat="server">
            </tbody>
        </table>
        <ul class="module_stat">
            <li><div class="module-c" id="barChart1"></div></li>
        </ul>
    </div>
    </li>
     
    <li class="every">    
    <div class="module-t">
        <h3>考察点得分率</h3>
    </div>
      <div class="module-c">
        <table class="module_table">
            <thead>
            <tr>
            <th width="22%">考察点</th>
            <th width="10%">题量</th>
            <th width="10%">分值</th>
            <th width="10%">个人得分</th>
            <th width="12%">个人得分率</th>
            <th width="12%">班级得分率</th>
            <th width="12%">年级得分率</th>
            <th width="12%">学区得分率</th>
             </tr>
            </thead>
            <tbody id="KnowledgePointList" runat="server"></tbody>
        </table>
      </div>
     </li>
     
     
    <li class="every">    
    <div class="module-t">
        <h3>能力维度得分率</h3>
    </div>
      <div class="module-c">
        <table class="module_table">
          <thead>
            <tr>
            <th width="20%">认识能力</th>
            <th width="10%">题量</th>
            <th width="10%">分值</th>
            <th width="12%">个人得分</th>
            <th width="12%">个人得分率</th>
            <th width="12%">班级得分率</th>
            <th width="12%">年级得分率</th>
            <th width="12%">学区得分率</th>
            </tr>
          </thead>
          <tbody id="CognitiveLeveList" runat="server"></tbody>
        </table>
        <ul class="module_stat">
          <li class="fl">
            <div class="module-c" id="PieChart"></div>
          </li>
          <li class="fr">
            <div class="module-c" id="barChart2"></div>
          </li>
        </ul>
      </div>
     </li>
     
    <li class="every">    
    <div class="module-t">
        <h3>应试能力—题型表现</h3>
    </div>
      <div class="module-c">
        <table class="module_table">
            <thead>
            <tr>
            <th width="20%">题型</th>
            <th width="10%">题量</th>
            <th width="10%">分值</th>
            <th width="12%">个人得分</th>
            <th width="12%">个人得分率</th>
            <th width="12%">班级得分率</th>
            <th width="12%">年级得分率</th>
            <th width="12%">学区得分率</th>
            </tr>
            </thead>
            <tbody id="QuestTypeList" runat="server"></tbody>
        </table>
        <ul class="module_stat">
          <li class="fl">
            <div class="module-c" id="PieChart1"></div>
          </li>
          <li class="fr">
            <div class="module-c" id="barChart3"></div>
          </li>
        </ul>
      </div>
     </li>
     
     
    <li class="every">    
    <div class="module-t">
        <h3>应试能力—难度表现</h3>
    </div>
      <div class="module-c">
        <table class="module_table">
            <thead>
            <tr>
            <th width="20%">试题难度</th>
            <th width="10%">题量</th>
            <th width="10%">分值</th>
            <th width="12%">个人得分</th>
            <th width="12%">个人得分率</th>
            <th width="12%">班级得分率</th>
            <th width="12%">年级得分率</th>
            <th width="12%">学区得分率</th>
            </tr>
            </thead>
            <tbody id="DifficList" runat="server"></tbody>
        </table>
        <ul class="module_stat">
          <li class="fl">
            <div class="module-c" id="PieChart2"></div>
          </li>
          <li class="fr">
            <div class="module-c" id="barChart4"></div>
          </li>
        </ul>
      </div>
     </li>
     
     
    <li class="every">    
    <div class="module-t">
        <h3>学生未得满分的题目汇总</h3>
    </div>
      <div class="module-c">
        <table class="module_table">
            <thead>
            <tr>
            <th width="8%">题号</th>
            <th width="30%">考察点</th>
            <th width="8%">分值</th>
            <th width="8%">个人得分</th>
            <th width="16%">你的答案</th>
            <th width="30%">正确答案</th>
            </tr>
            </thead>
            <tbody id="AnswerAnalyzeList" runat="server"></tbody>
        </table>
      </div>
     </li>
     
    <li class="every">    
    <div class="module-t">
        <h3>参考答案</h3>
    </div>
      <div class="module-c">
          <div ID="TempList" runat="server" class="module_stat"></div>
      </div>
     </li>
     
     </ul>
    </div>
    
    <div id="end">
      <div class="stu"><strong class="key"><%=StudentName %></strong>同学祝贺你成功获取课业诊断报告，希望这个报告能为你查漏补缺，降低盲目补习的时间，对提高学习潜能有所帮助，也希望这种科学测试方法能够帮助你提升学习空间，考入理想学校，衷心祝福你成功实现自己的梦想！</div>
      <ul class="info">
  	    <li>http://www.hdpx.com.cn</li>
        <li>电话：88616965</li>
        <li>电话：88616968</li>
        <li>东校区：北京市海淀区牡丹园东里2号</li>
        <li>西校区：北京市海淀区远大西路29号</li>
      </ul>
      <a href="#" class="link" title="重新浏览">重新浏览</a>
    </div>
    </form>
</body>
</html>
